

(function($) {
	
	$.fn.tilesSlider = (function() {
	var $tiles_slider = $(this);
	$blocks_b = $('#blocks');
	$settings_b = $('#settings');
	$connections_b = $('#connections');
	$back_b = $('.back');
	$front_b = $('.front');
	var $tiles = $tiles_slider.children();
	var total_elem = $tiles.length;
	var w_w = $(window).width();
	var bckground = $('body').css('background');
	var bheight = $('body').css('height');
	init();
	bindTiles();
	
	function bindTiles() {
	$blocks_b.bind('click', function() {
		slide(2, 1);
		
	
	
	});
	
	$settings_b.bind('click', function() {
		slide(3, 3);
		
		
	
	
	
	});
	
	//Common hover effect
	$('#maintiles').children('div').each( function() {
	$(this).hover(function() {
		$(this).find('header').css({'opacity': '1.0',
									 'height' : '80px',
									 'border-top': 'solid 1px #dcdcdc'});
	
	}, function() {
	    $(this).find('header').css({'opacity': '0.7',
									 'height' : '40px',
									  'border-top': 'solid 1px #c8c8c8'});
	});
	});
	
	$back_b.bind('click', function() {
		slide(1, 0);
		$back_b.hide();
		$front_b.hide();
		$('body').css('background' , bckground);
		//$('body').css('height' , bheight);

		
	
	});
	
	$front_b.bind('click', function() {
		slide(1, 0);
		$back_b.hide();
		$front_b.hide();
		
		
	
	});
	
	$connections_b.bind('click', function() {
		slide(0, 2);
		
	
	
	
	});
	}
	
	function init() {
		var tiles_slider_w = w_w * total_elem;
		
		$tiles_slider.width(tiles_slider_w + 'px');
		$tiles.width(w_w + 'px');
		$back_b.hide();
		$front_b.hide();
		//slide to main in the begining
		var slideTo = parseInt(-w_w * 1);
		var h = $( window ).height();
		$('#author-page-container').css('height', h + 'px');
		$tiles_slider.stop().animate({
						left	: slideTo + 'px'
					},0, 'jswing');
					
		
		
		
	
	}
	
	function blocksTile() {
		var comics = $('.myblocks').children('li');
		$blocks_b.find('h1').html(comics.length);
	}
	
	function slide(index, b_visible) {
	
	var slideTo = parseInt(-w_w * index);
		if(b_visible == 1)
			bVisible = function() { $back_b.show();
									}
		else if(b_visible == 2)
			bVisible = function() { $front_b.show();}
			
		else if(b_visible == 3)
			bVisible = function() { $back_b.show();
									$('body').css({'background' : '#696969',
													'transition': '0.2s'});}
		else 
			bVisible = function() {
			
				return;}
			
					$tiles_slider.stop().animate({
						left	: slideTo + 'px'
					},1000, 'jswing', bVisible);

	
	}

	
	});
    
})(jQuery);